<template>
	<div style="display: inline-block">
		<el-button type="primary" @click="handleShow">
			{{ $t('字段选择') }}
		</el-button>
		<el-dialog
			:visible.sync="visible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="$t('请勾选需要显示的字段')"
			width="520px"
		>
			<div v-for="(field, index) in copyField" :key="index">
				<el-checkbox v-model="field.isShow" :label="field.label" />
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="default" @click="handleReset">
					{{ $t('重置') }}
				</el-button>
				<el-button type="primary" @click="handleSave">
					{{ $t('确定') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
	props: {
		columns: {
			type: Array,
			default: []
		},
		fieldSelectKey: {
			// 为空时，默认使用  proxyInfo.id + this.$route.name
			type: String,
			default: ''
		}
	},
	data() {
		return {
			visible: false,
			copyField: []
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	watch: {
		visible(next) {
			if (!next) {
				this.initField(false)
			}
		}
	},
	mounted() {
		this.copyField = []

		for (const fieldItem of this.columns) {
			if (fieldItem.label && fieldItem.isShow !== false) {
				this.copyField.push({
					label: fieldItem.label,
					prop: fieldItem.prop || fieldItem.label,
					isShow: true
				})
			}
		}
		this.initField()
	},
	methods: {
		getFieldKey() {
			const key =
				this.fieldSelectKey || this.userInfo.id + '_' + this.$route.name
			// console.log('fieldSelect :', key)
			return key
		},
		initField(update = true) {
			const tempFieldKey = this.getFieldKey()
			let lastFieldList = []
			try {
				const temp = localStorage.getItem(tempFieldKey)
				lastFieldList = temp ? JSON.parse(temp) : []

				for (const item of lastFieldList) {
					const copySearch = this.copyField.find(
						(temp) => temp.prop === item.prop
					)
					if (copySearch) {
						copySearch.isShow = item.isShow !== false
					}
				}

				update && this.updateColumns()
			} catch (e) {
				console.log(e)
			}
		},
		updateColumns(reset = false) {
			const tempColumns = [...this.columns]
			for (const item of this.copyField) {
				if (reset) {
					item.isShow = true
				}

				const search = tempColumns.find(
					(temp) =>
						(!temp.prop && temp.label === item.prop) ||
						temp.prop === item.prop
				)
				if (search) {
					search.isShow = item.isShow !== false
				}
			}
			// console.log('update:columns', tempColumns)
			this.$emit('update:columns', tempColumns)
		},
		handleShow() {
			this.visible = true
		},
		handleClose() {
			this.visible = false
		},
		handleReset() {
			this.updateColumns(true)

			localStorage.setItem(
				this.getFieldKey(),
				JSON.stringify(this.copyField)
			)
			this.$message.success('重置成功')
			this.handleClose()
		},
		handleSave() {
			this.updateColumns()

			localStorage.setItem(
				this.getFieldKey(),
				JSON.stringify(this.copyField)
			)
			this.$message.success('保存成功')
			this.handleClose()
		}
	}
}
</script>
